<template>
	<div class="login">
		<el-row></el-row>
		<el-row style="margin-top: 200px;">
			<el-col :span="12" :offset="6">
				<el-card style="height: 550px;" shadow="always">
					<div slot="header" class="clearfix">
						<strong><span style="font-size: 30px;">XX系统管理后台</span></strong>
					</div>
					<el-row :gutter="10">
						<el-col :span="12">
							<el-image :src="require('@/assets/bg/bg3.png')"></el-image>
						</el-col>
						<el-col :span="12" style="padding-top: 50px;">
							<el-form style="margin: 60px;" label-width="80px" :model="loginData" ref="loginForm"
								:rules="rules">
								<el-form-item label="登录名" prop="username">
									<el-input v-model="loginData.username" clearable></el-input>
								</el-form-item>
								<el-form-item label="密码" prop="password">
									<el-input v-model="loginData.password" type="password" clearable></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" style="width: 100%;" @click="login">确定</el-button>
								</el-form-item>
							</el-form>
						</el-col>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		login
	} from '@/api/auth'
	import {
		setLoginUser
	} from '@/utils/storage'

	export default {
		name: 'login',
		data() {
			return {
				loginData: {
					username: 'admin',
					password: 'admin123'
				},
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 2,
							max: 20,
							message: '长度在 2 到 20 个字符',
							trigger: 'blur'
						}
					],
					password: {
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				}
			}
		},
		methods: {
			login() {
				this.$refs.loginForm.validate((valid) => {
					if (valid) {
						login(this.loginData.username, this.loginData.password).then(res => {
							console.log('login success.', res);
							setLoginUser(res)
							this.$router.push('/')
						});
					}
				});
			}
		}
	}
</script>

<style>
	.login {
		height: 100%;
		background-image: url("../assets/bg/login-bg.jpg");
		background-size: cover;
		/* filter: blur(10px); */
	}

	.login-center {
		background-image: url("../assets/bg/bg2.png");
		background-size: cover;
	}
</style>
